<template>
  <div class="table-container">
    <div class="table-title">市场化交易明细</div>
    <div class="formula-detail">
      <el-collapse class="formula-collapse" v-model="activeNames" accordion @change="handleChange">
        <el-collapse-item title="公式详情" name="1">
          <div class="formula">预测电费 = 预测电量 * 单价</div>
          <div class="formula">实际电费 = 实际电量 * 单价</div>
          <div class="formula">差额电费 = 实际电费 - 预测电费</div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-table ref="tableRef" :data="tableData.data" key="itemKey" border style="width: 100%">
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column label="电源基本情况" width="150">
        <el-table-column prop="name" label="名称" width="120">
          <template #default="scope">
            <el-input size="small" v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="户号" width="120">
          <template #default="scope">
            <el-input size="small" v-model="scope.row.number"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="level" label="电压等级" width="120">
          <template #default="scope">
            <el-select
              v-model="scope.row.level"
              placeholder="Select"
              size="small"
              style="width: 100%"
            >
              <el-option
                v-for="item in levelOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="capacity" label="变压器容量" width="180">
          <template #default="scope">
            <el-input size="small" v-model="scope.row.capacity"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="institution" label="单一制/两部制" width="180">
          <template #default="scope">
            <el-select
              v-model="scope.row.institution"
              placeholder="Select"
              size="small"
              style="width: 100%"
            >
              <el-option
                v-for="item in iniOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="dis_price" label="输配电价" width="120">
          <template #default="scope">
            <span>{{ scope.row.dis_price }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="预测数">
        <el-table-column prop="fore_electric" label="电量" width="120">
          <template #default="scope">
            <el-input size="small" v-model="scope.row.fore_electric"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="fore_price" label="单价">
          <template #default="scope">
            <el-input size="small" v-model="scope.row.fore_price"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="fore_cost" label="电费">
          <template #default="scope">
            <span>{{ getForecastPrice(scope.row) }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="实际发生数">
        <el-table-column prop="actual_electric" label="电量" width="120">
          <template #default="scope">
            <el-input size="small" v-model="scope.row.actual_electric"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="actual_price" label="单价">
          <template #default="scope">
            <el-input size="small" v-model="scope.row.actual_price"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="actual_cost" label="电费">
          <template #default="scope">
            <span>{{ getActualPrice(scope.row) }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="差额">
        <el-table-column prop="dif_electric" label="电量" width="120">
          <template #default="scope">
            <span>{{ getDifElectric(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dif_cost" label="电费">
          <template #default="scope">
            <span>{{ getDifPrice(scope.row) }}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'Market',
  inheritAttrs: false,
});

const tableRef = ref();

const levelOptions = reactive([
  {
    value: '不满1千伏',
    label: '不满1千伏',
  },
  {
    value: '1-10千伏',
    label: '1-10千伏',
  },
  {
    value: '35千伏',
    label: '35千伏',
  },
  {
    value: '110千伏',
    label: '110千伏',
  },
  {
    value: '220千伏',
    label: '220千伏',
  },
]);
const iniOptions = reactive([
  {
    value: '两部制',
    label: '两部制',
  },
  {
    value: '单一制',
    label: '单一制',
  },
  {
    value: '电能替代',
    label: '电能替代',
  },
]);
const priceOptions = reactive([
  {
    value: '政府定价',
    label: '政府定价',
  },
  {
    value: '协商价格',
    label: '协商价格',
  },
  {
    value: '未定价',
    label: '未定价',
  },
  {
    value: '其他，备注说明',
    label: '其他，备注说明',
  },
]);

const activeNames = ref('1');
const handleChange = (val: any) => {};

const tableData = reactive({
  data: [
    {
      name: '',
      number: '',
      level: '',
      cost: '',
      category1: '',
      category2: '',
      ele_cat: '',
      price: '',
      exe_price: '',
      fore_electric: '',
      fore_cost: '',
      actual_electric: '',
      actual_cost: '',
      dif_electric: '',
      dif_cost: '',
    },
    {
      name: '',
      number: '',
      level: '',
      cost: '',
      category1: '',
      category2: '',
      ele_cat: '',
      price: '',
      exe_price: '',
      fore_electric: '',
      fore_cost: '',
      actual_electric: '',
      actual_cost: '',
      dif_electric: '',
      dif_cost: '',
    },
    {
      name: '',
      number: '',
      level: '',
      cost: '',
      category1: '',
      category2: '',
      ele_cat: '',
      price: '',
      exe_price: '',
      fore_electric: '',
      fore_cost: '',
      actual_electric: '',
      actual_cost: '',
      dif_electric: '',
      dif_cost: '',
    },
    {
      name: '',
      number: '',
      level: '',
      cost: '',
      category1: '',
      category2: '',
      ele_cat: '',
      price: '',
      exe_price: '',
      fore_electric: '',
      fore_cost: '',
      actual_electric: '',
      actual_cost: '',
      dif_electric: '',
      dif_cost: '',
    },
    {
      name: '',
      number: '',
      level: '',
      cost: '',
      category1: '',
      category2: '',
      ele_cat: '',
      price: '',
      exe_price: '',
      fore_electric: '',
      fore_cost: '',
      actual_electric: '',
      actual_cost: '',
      dif_electric: '',
      dif_cost: '',
    },
  ],
});

const getForecastPrice = (row: any) => {
  if (row.exe_price && row.fore_electric) {
    return row.exe_price * row.fore_electric;
  } else {
    return '-';
  }
};
const getActualPrice = (row: any) => {
  if (row.exe_price && row.actual_electric) {
    return row.exe_price * row.actual_electric;
  } else {
    return '-';
  }
};
const getDifElectric = (row: any) => {
  if (row.actual_electric && row.fore_electric) {
    return row.actual_electric - row.fore_electric;
  } else {
    return '-';
  }
};
const getDifPrice = (row: any) => {
  if (row.actual_cost && row.fore_cost) {
    return row.actual_cost - row.fore_cost;
  } else {
    return '-';
  }
};
</script>

<style lang="scss" scoped>
.formula-detail {
  display: flex;
  justify-content: flex-end;
}
.formula-collapse {
  max-width: 100%;
  border-radius: 10px;
  background-color: #ffffff;
  padding-left: 10px;

  :deep(.el-collapse-item__header) {
    color: #4080ff;
    background-color: transparent;
  }
}
.formula {
  padding: 5px;
}
</style>